<template>
    <n-button @click="selectFile" :loading="loading" type="info" size="small">
        {{ prop.title }}
    </n-button>

    <input id="file_upload" ref="inputRef" :style="{ display: 'none' }" type="file" @change="execUpload" :accept="prop.accept" />
</template>

<script lang="ts" setup>
import * as qiniu from 'qiniu-js'
import { Http } from '@/libs'
import { ref } from 'vue'
import { Guid } from 'guid-typescript'

const { $notification: notification } = window

const prop = defineProps({
    accept: {
        type: String,
    },
    title: {
        type: String,
        default: '上传文件',
    },
    type: {
        type: String,
        default: 'File',
    },
    value: {},
})

const emit = defineEmits(['update:value'])

const loading = ref<boolean>(false)

const inputRef = ref<any>(null)

const selectFile = () => {
    inputRef.value.click()
}

const execUpload = () => {
    loading.value = true

    let file = inputRef.value.files[0]

    if (file.size <= 512 * 1024) {
        execQiniuUpload(file, file.name)
    } else {
        let options = {
            quality: (512 * 1024) / file.size,
            noCompressIfLarger: true,
            // maxWidth: 1000,
            // maxHeight: 618
        }
        // console.log(file)
        // console.log(file.size)
        // console.log(options)
        qiniu.compressImage(file, options).then((data: any) => {
            // console.log(data.dist)
            if (data.dist.size > 1024 * 1024) {
                loading.value = false
                notification.error({
                    duration: 2000,
                    title: '操作失败',
                    content: '上传文件[' + file.name + ']太大，请上传小于1M的文件',
                })
            } else {
                execQiniuUpload(data.dist, file.name)
            }
            // console.log(data)
            // console.log(data.dist.size)

            // execQiniuUpload(data.dist, file.name)
        })
    }
}

const imgValues = ref<string[]>([])
const execQiniuUpload = (file: File, name: string) => {
    Http.post('/comm/tool/file/qiniu/info', { type: prop.type }).then(resp => {
        if (resp.stat.err > 0) {
            loading.value = false
            return
        }

        let config = {
            useCdnDomain: true,
            forceDirect: true,
        }
        const putExtra = {
            fname: name,
            mimeType: prop.accept,
        }

        let key = resp.data.path + Guid.create().toString() + '.' + name.split('.').pop()?.toLowerCase()

        qiniu.upload(file, key, resp.data.token, putExtra, config).subscribe({
            next: result => {
                // console.log(result)
            },
            error: err => {
                // console.log(err)
                loading.value = false
                notification.error({
                    duration: 2000,
                    title: '操作失败',
                    content: '上传文件[' + name + ']失败',
                })
            },
            complete: res => {
                // console.log(res)
                loading.value = false
                notification.success({
                    duration: 2000,
                    title: '操作成功',
                    content: '您已成功上传[' + name + ']',
                })
                imgValues.value.push(resp.data.domain + '/' + res.key)
                emit('update:value', imgValues.value)
            },
        })
    })
}
</script>
